滑動刪除可以快速而直觀地刪除列表中的項目。這種功能通常用於顯示列表,例如郵件列表、待辦事項列表、聯絡人列表、購物清單等
1.顯示列表項目: 首先,您需要在應用程序中顯示要滑動刪除的列表項目。可以使用Flutter的 ListView
或 ListView.builder
來創建這些列表。範例程式使用ListView.builder
。
2.Dismissible Widget: 每個列表項目都應該被包裝在一個 Dismissible widget 中。Dismissible 接受一個 key 屬性用於識別列表中的項目。
3.滑動動作: 當用戶在列表項目上滑動手指時,Dismissible widget 會檢測到滑動動作。根據滑動的方向,您可以定義一個回調函數 onDismissed
,以執行刪除項目的操作。
4.更新UI: 在滑動操作中,通常會從列表中移除項目。需要更新UI,以便刪除的項目不再顯示在列表中。
5.顯示反饋: 您通常會在刪除後顯示反饋給用戶,以確保他們知道該項目已被刪除。練習的程式碼使用SnackBar
顯示刪除。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
List<String> items = List<String>.generate(40, (i) => "列表${i + 1}"); //創建1~40列表
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("滑動刪除"),
),
// 在Scaffold的主體中顯示一個ListView,用於顯示列表項目
body: ListView.builder(
itemCount: items.length, // 指定列表中的項目總數
// 使用 itemBuilder 動態創建和顯示每個列表項目
itemBuilder: (BuildContext context, int index) {
final item = items[index]; // 獲取當前項目的內容
key: Key(item), // 指定唯一的識別鍵,用於辨識列表項目
onDismissed: (direction) {
// 當用戶滑動刪除項目時執行的回調函數
items.removeAt(index); // 從列表中刪除該項目
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("$item 被刪除了"), // 顯示一條SnackBar以確認刪除操作
),
);
},
child: ListTile(
title: Text('$item'), // 顯示列表項目的內容
),
);
},
),
),
);
}
}
執行結果圖(點連結可顯示)
https://imgur.com/3gSCThK